<template>
  <div class="baseInfo" v-if="Object.keys(baseInfo).length !==0">
    <div class="info-title">{{baseInfo.title}}</div>
    <div class="info-price">
      <span class="newPrice">{{baseInfo.newPrice}}</span>
      <span class="oldPrice">{{baseInfo.oldPrice}}</span>
      <span class="discount" v-if="baseInfo.disCount">{{baseInfo.disCount}}</span>
    </div>
    <div class="info-other">
      <span>{{baseInfo.columns[0]}}</span>
      <span>{{baseInfo.columns[1]}}</span>
      <span>{{baseInfo.services[baseInfo.services.length-1].name}}</span>
    </div>
    <div class="info-services">
      <div class="info-services-item" v-for="index in baseInfo.services.length-2" :key="index">
        <img :src="baseInfo.services[index].icon" alt="">
        <span>{{baseInfo.services[index].name}}</span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    props:{
      baseInfo:{
        type:Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .baseInfo{
    marign-top:15px;
    padding:0 8px;
    color:#999;
    border-bottom:5px solid #f2f5f8;
  }
  .info-title{
    color:#222;
  }
  .info-price{
    margin-top:10px;
  }
  .info-price .newPrice{
    font-size:24px;
    color:#ff5777;
  }
  .info-price .oldPrice{
    font-size:13px;
    margin-left:15px;
    text-decoration: line-through;
  }
  .info-price .discount{
    font-size:12px;
    padding:2px 5px;
    color:#fff;
    background-color:#ff5777;
    border-radius:8px;
    position:relative;
    top:-8px;
  }
  .info-other{
    margin-top:15px;
    line-height: 30px;
    display:flex;
    font-size:13px;
    justify-content:space-around;
    border-bottom:1px solid rgba(100,100,100,.1);
  }
  .info-services{
    display:flex;
    justify-content:space-around;
    line-height: 60px;
  }
  .info-services-item img{
    width:14px;
    height:14px;
    position:relative;
    left:-5px;
    top:2px
  }
  .info-services-item span{
    font-size:8px;
    color:#333;
  }
</style>
